<template>
	<view class="padding30">
		<!-- 添加悬浮 -->
		<view class="suspension" @click="addCouponManagement()">
			<image class="addIcon" src="../../static/会员卡管理端/addIcon.png" mode=""></image>
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list " :key="index">
				<view class="welfareCenterPage">
					<view class="flex ">
						<view class="couponManagement padding15 flex-columns">
							<view class=" flex-between">
								<view style="color: rgb(255, 97, 69);" class="">
									{{item.type==2?item.name:item.type==3?item.name:'满'+item.trigger_amount+'减'+item.discount_intensity+'('+item.name+')'}}
								</view>
								<view style="color: rgb(255, 97, 69);" class="font-weight_bold">
									{{item.discount_intensity}} 元
								</view>
							</view>
							<view style="color: rgb(148, 148, 148);" class="">
								<text>结束时间：{{item.end_time}}</text>
							</view>
						</view>

					</view>
					<view class="flex ">
						<view class="contents  padding_0_20rpx flex-start-center">
							<view class="font-overflow">
								{{item.desc}}
							</view>
						</view>
					</view>
					<view class="flex-between margin-top_40rpx">
						<view class="flex">
							<!-- <view class="margin-right_30rpx" style="color: rgb(148, 148, 148);"> 已核销 {{item.use_number}}</view> -->
							<view class="flex" style="color: rgb(81, 142, 247)" @click="verificationRecords(item)">
								使用记录<uni-icons type="right" color="color: rgb(81, 142, 247);" size="16"></uni-icons>
							</view>
						</view>
						<view class="flex">
							<view class="delete flex margin-right_30rpx" @click="detelCoupon(item)">
								删除
							</view>
							<view class="edit flex" @click="editCoupon(item)">
								编辑
							</view>
						</view>
					</view>
				</view>

			</block>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				token: uni.getStorageSync('login').token,
				
			}
		},
		onLoad() {

		},
		onShow() {
			this.mescroll?.resetUpScroll();
			
		},
		methods: {
			// 轮播图列表
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.couponList,
					data: {
						page: scroll.num,
						limit: 10,
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
		
			
				if (result.code == 0) {
				
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			addCouponManagement() {
				this.$sun.navGo('/pages/couponManagement/addCoupon')
			},
			editCoupon(item){
				this.$sun.navGo('/pages/couponManagement/addCoupon',{...item})
			},
			verificationRecords(item){
				this.$sun.navGo('/pages/couponManagement/userRecords',{...item})
			},
			// 删除分类
			async detelCoupon(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除' + item.name ,
					success: async (res) => {
						if (res.confirm) {
			
							const result = await this.$http.post({
								url: this.$api.upCouponStatus,
								data: {
									id: item.id,
									status: 3
			
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
			
							})
							if (result.code == 0) {
								this.mescroll?.resetUpScroll();
								this.$sun.toast('删除成功', 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {
			
						}
					}
				});
			
			
			
			
			
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #f6f6f6;
	}

	.suspension {
		position: fixed;
		right: 15rpx;
		width: 96rpx;
		bottom: 140rpx;
		height: 96rpx;
		border-radius: 50%;
		background-color: #fff;
		text-align: center;
		line-height: 126rpx;
		z-index: 999;
		filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

		.addIcon {

			width: 50rpx;
			height: 50rpx;
		}
	}

	.welfareCenterPage {
		margin-top: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		background: rgb(255, 255, 255);

		.couponManagement {
			width: 668.56rpx;
			height: 172.42rpx;
			background: rgb(249, 249, 249);
		}

		.contents {

			border: 1px dashed rgb(203, 203, 203);
			width: 628.56rpx;
			color: rgb(217, 183, 118);
			height: 64rpx;
			background: rgb(255, 248, 232);
		}

		.img {
			width: 185.48rpx;
			height: 185.48rpx;

		}

		.delete {
			box-sizing: border-box;
			border: 2rpx solid rgb(223, 223, 223);
			border-radius: 4rpx;
			width: 110.6rpx;
			height: 55.9rpx;
			background: rgb(223, 223, 223);
			color: rgb(148, 148, 148);
		}

		.edit {
			width: 110.6rpx;
			height: 55.9rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(81, 142, 247);
			border-radius: 4rpx;
			color: rgb(81, 142, 247);
		}
	}
</style>